<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .value {
                font-weight: bold;
            }
        </style>
    </ui:define>

    <ui:define name="topbar-title">Data</ui:define>

    <ui:define name="content">
        <h:form id="form">

            <p:growl id="msgs" showDetail="true" />

            <div class="ui-g">
                <div class="ui-g-12">
                    <div class="card">
                        <h1>DataTable</h1>
                        <p:dataTable var="car"
                                     value="#{dtSelectionView.cars1}"
                                     reflow="true"
                                     rows="10"
                                     paginator="true"
                                     paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
                                     selectionMode="single"
                                     selection="#{dtSelectionView.selectedCar}"
                                     rowKey="#{car.id}">
                            <f:facet name="header">
                                Single with Row Click
                            </f:facet>

                            <p:column headerText="Id" sortBy="#{car.id}">
                                <h:outputText value="#{car.id}" />
                            </p:column>

                            <p:column headerText="Year" sortBy="#{car.year}">
                                <h:outputText value="#{car.year}" />
                            </p:column>

                            <p:column headerText="Brand" sortBy="#{car.brand}">
                                <h:outputText value="#{car.brand}" />
                            </p:column>

                            <p:column headerText="Color" sortBy="#{car.color}">
                                <h:outputText value="#{car.color}" />
                            </p:column>
                        </p:dataTable>
                    </div>
                </div>

                <div class="ui-g-12 ui-lg-6">
                    <!-- Left Side -->
                    <div class="card">
                        <h1>DataGrid</h1>
                        <p:dataGrid id="cars"
                                    value="#{dataGridView.cars}"
                                    var="car"
                                    columns="3"
                                    layout="grid"
                                    rows="6"
                                    paginator="true"
                                    currentPageReportTemplate="({currentPage} of {totalPages})"
                                    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                    rowsPerPageTemplate="6,12,16">
                            <f:facet name="header">
                                Cars For Sale
                            </f:facet>

                            <p:panel header="#{car.brand}" style="text-align:center">
                                <h:panelGrid columns="1" style="width:100%">
                                    <h:outputText value="#{car.color}" class="Fs14 FontDosisMedium" />

                                    <h:outputText value="#{car.year}" />

                                    <p:commandButton update="form:selectedCarDetail" oncomplete="PF('carDialog').show()" title="View Detail" icon="fa fa-flag-checkered Fs16 White" styleClass="AquaButton">
                                        <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                                    </p:commandButton>
                                </h:panelGrid>
                            </p:panel>
                        </p:dataGrid>

                        <p:dialog header="Car Info"
                                  widgetVar="carDialog"
                                  modal="true"
                                  showEffect="fade"
                                  hideEffect="fade"
                                  resizable="false"
                                  responsive="true">
                            <p:outputPanel id="selectedCarDetail" style="text-align:center;">
                                <p:panelGrid columns="2"
                                             columnClasses="label,value"
                                             rendered="#{not empty dataGridView.selectedCar}">
                                    <f:facet name="header">
                                        <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/>
                                    </f:facet>

                                    <h:outputText value="Id:" />
                                    <h:outputText value="#{dataGridView.selectedCar.id}" />

                                    <h:outputText value="Year:" />
                                    <h:outputText value="#{dataGridView.selectedCar.year}" />

                                    <h:outputText value="Color:" />
                                    <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/>

                                    <h:outputText value="Price:" />
                                    <h:outputText value="\$#{dataGridView.selectedCar.price}" />
                                </p:panelGrid>
                            </p:outputPanel>
                        </p:dialog>
                    </div>

                    <div class="card">
                        <h1>PickList</h1>
                        <p:pickList id="pickList"
                                    value="#{pickListView.cities}"
                                    var="cities"
                                    itemLabel="#{cities}"
                                    itemValue="#{cities}"
                                    effect="fade"
                                    showSourceControls="true"
                                    showTargetControls="true"
                                    showSourceFilter="true"
                                    showTargetFilter="true"
                                    filterMatchMode="contains"
                                    responsive="true"
                                    moveUpLabel="Move Up"
                                    moveTopLabel="Move Top"
                                    moveDownLabel="Move Down"
                                    moveBottomLabel="Move Bottom"
                                    addLabel="Add"
                                    addAllLabel="Add All"
                                    removeLabel="Remove"
                                    removeAllLabel="Remove All">
                            <f:facet name="sourceCaption">From</f:facet>
                            <f:facet name="targetCaption">To</f:facet>

                            <p:ajax event="transfer" listener="#{pickListView.onTransfer}" update="msgs" />
                            <p:ajax event="select" listener="#{pickListView.onSelect}" update="msgs" />
                            <p:ajax event="unselect" listener="#{pickListView.onUnselect}" update="msgs" />
                            <p:ajax event="reorder" listener="#{pickListView.onReorder}" update="msgs" />
                        </p:pickList>
                    </div>

                    <div class="card">
                        <h1>OrderList</h1>
                        <p:orderList value="#{orderListView.cities}"
                                     var="city"
                                     itemLabel="#{city}"
                                     itemValue="#{city}"
                                     controlsLocation="left"
                                     responsive="true"
                                     moveUpLabel="Move Up"
                                     moveTopLabel="Move Top"
                                     moveDownLabel="Move Down"
                                     moveBottomLabel="Move Bottom">
                            <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/>
                            <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/>
                            <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/>

                            <f:facet name="caption">Cities List</f:facet>
                        </p:orderList>
                    </div>

                    <div class="card">
                        <h1>TreeTable</h1>
                        <p:treeTable value="#{ttSelectionView.root3}"
                                     var="document"
                                     selectionMode="checkbox"
                                     selection="#{ttSelectionView.selectedNodes2}">
                            <f:facet name="header">
                                Checkbox
                            </f:facet>

                            <p:column headerText="Name" sortBy="#{document.name}">
                                <h:outputText value="#{document.name}" />
                            </p:column>

                            <p:column headerText="Size">
                                <h:outputText value="#{document.size}" />
                            </p:column>

                            <p:column headerText="Type">
                                <h:outputText value="#{document.type}" />
                            </p:column>

                            <!--<p:column headerText="Action">
                                <p:button icon="fa fa-print" styleClass="RedButton"/>
                                <p:button icon="fa fa-book" styleClass="OrangeButton"/>
                                <p:button icon="fa fa-bitbucket" styleClass="TealGreenButton"/>
                            </p:column>-->
                        </p:treeTable>
                    </div>
                </div>

                <div class="ui-g-12 ui-lg-6">
                    <!-- Right Side -->
                    <div class="card">
                        <h1>DataList</h1>
                        <p:dataList value="#{dataListView.cars1}"
                                    var="car"
                                    type="ordered">
                            <!--itemType="none"
                            paginator="true"
                            rows="7"
                            styleClass="paginated"-->
                            <f:facet name="header">
                                Cars For Sale
                            </f:facet>
                            <!--<p:commandLink update=":form2:carDetail" oncomplete="PF('carDialog2').show()" title="View Detail" style="margin-right:10px">
                                <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
                                <i class="fa fa-table gray Fs18" style="margin-top:5px;"/>
                            </p:commandLink>-->
                            <h:outputText value="#{car.brand}, #{car.year}"/>
                        </p:dataList>
                    </div>

                    <div class="card">
                        <h1>DataList - Paginator</h1>
                        <p:dataList value="#{dataListView.cars2}"
                                    var="car"
                                    type="unordered"
                                    itemType="none"
                                    paginator="true"
                                    rows="7"
                                    styleClass="paginated">
                            <f:facet name="header">
                                Cars For Sale
                            </f:facet>
                            <p:commandLink update="form:carDetail" oncomplete="PF('carDialog2').show()" title="View Detail" style="margin-right:10px;">
                                <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
                                <i class="fa fa-table gray Fs18" style="margin-top:5px;"/>
                            </p:commandLink>
                            <h:outputText value="#{car.brand}, #{car.year}" style="display:inline-block"/>
                        </p:dataList>

                        <p:dialog header="Car Info"
                                  widgetVar="carDialog2"
                                  modal="true"
                                  showEffect="blind"
                                  hideEffect="explode"
                                  resizable="false"
                                  responsive="true">
                            <p:outputPanel id="carDetail" style="text-align:center;">
                                <p:panelGrid columns="2"
                                             columnClasses="label,value"
                                             rendered="#{not empty dataListView.selectedCar}">
                                    <f:facet name="header">
                                        <p:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/>
                                    </f:facet>

                                    <h:outputText value="Id:" />
                                    <h:outputText value="#{dataListView.selectedCar.id}" />

                                    <h:outputText value="Year:" />
                                    <h:outputText value="#{dataListView.selectedCar.year}" />

                                    <h:outputText value="Color:" />
                                    <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                                    <h:outputText value="Price:" />
                                    <h:outputText value="\$#{dataListView.selectedCar.price}" />
                                </p:panelGrid>
                            </p:outputPanel>
                        </p:dialog>
                    </div>

                    <div class="card">
                        <h1>Carousel</h1>
                        <p:carousel value="#{carouselView.cars}"
                                    var="car"
                                    headerText="Carousel"
                                    itemStyleClass="carItem"
                                    itemStyle="width:160px;height:150px;text-align:center"
                                    responsive="true">
                            <p:panelGrid columns="2" styleClass="ui-panelgrid-blank" style="width:100%" columnClasses="label,value">
                                <h:outputText value="Id:" />
                                <h:outputText value="#{car.id}" />

                                <h:outputText value="Year" />
                                <h:outputText value="#{car.year}" />

                                <h:outputText value="Color:" />
                                <h:outputText value="#{car.color}" style="color:#{car.color}"/>

                                <h:outputText value="Price" />
                                <h:outputText value="\$#{car.price}"/>
                            </p:panelGrid>

                            <f:facet name="footer">
                                Carousel Footer
                            </f:facet>
                        </p:carousel>
                    </div>

                    <div class="card">
                        <h1>Tree Single</h1>
                        <p:tree value="#{treeSelectionView.root1}"
                                var="doc"
                                selectionMode="single"
                                selection="#{treeSelectionView.selectedNode}">
                            <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                                <h:outputText value="#{doc.name}"/>
                            </p:treeNode>
                            <p:treeNode type="document" icon="ui-icon-document">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="picture" icon="ui-icon-image">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="mp3" icon="ui-icon-music">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                        </p:tree>
                    </div>

                    <div class="card">
                        <h1>Tree Checkbox</h1>
                        <p:tree value="#{treeSelectionView.root3}"
                                var="doc"
                                selectionMode="checkbox"
                                selection="#{treeSelectionView.selectedNodes2}">
                            <p:treeNode icon="ui-icon-note">
                                <h:outputText value="#{doc.name}"/>
                            </p:treeNode>
                            <p:treeNode type="document" icon="ui-icon-document">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="picture" icon="ui-icon-image">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="mp3" icon="ui-icon-music">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                        </p:tree>
                    </div>
                </div>

                <div class="ui-g-12">
                    <div class="card">
                        <h1>Horizontal Tree</h1>
                        <p:tree value="#{treeSelectionView.root1}"
                                var="doc"
                                orientation="horizontal"
                                selectionMode="single"
                                selection="#{treeSelectionView.selectedNode}">
                            <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                                <h:outputText value="#{doc.name}"/>
                            </p:treeNode>
                            <p:treeNode type="document" icon="ui-icon-document">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="picture" icon="ui-icon-image">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                            <p:treeNode type="mp3" icon="ui-icon-video">
                                <h:outputText value="#{doc.name}" />
                            </p:treeNode>
                        </p:tree>
                    </div>

                    <div class="card">
                        <h1>Schedule</h1>
                        <p:schedule id="schedule"
                                    value="#{scheduleView.eventModel}"
                                    widgetVar="myschedule"
                                    locale="zh"
                                    timeZone="GMT+6">
                            <!--locale="en_US" timeZone="GMT+6"-->
                            <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                            <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                            <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="msgs" />
                            <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="msgs" />
                        </p:schedule>

                        <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip" responsive="true">
                            <p:panelGrid id="eventDetails" columns="2">
                                <h:outputLabel for="title" value="Title:" />
                                <p:inputText id="title" value="#{scheduleView.event.title}" required="true" />

                                <h:outputLabel for="from" value="From:" />
                                <p:inputMask id="from" value="#{scheduleView.event.startDate}" mask="99/99/9999">
                                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                                </p:inputMask>

                                <h:outputLabel for="to" value="To:" />
                                <p:inputMask id="to" value="#{scheduleView.event.endDate}" mask="99/99/9999">
                                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                                </p:inputMask>

                                <h:outputLabel for="allDay" value="All Day:" />
                                <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" />

                                <p:commandButton type="reset" value="Reset" />
                                <p:commandButton id="addButton"
                                                 value="Save"
                                                 actionListener="#{scheduleView.addEvent}"
                                                 oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
                            </p:panelGrid>
                        </p:dialog>
                    </div>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>